﻿<!DOCTYPE html>
<html lang="zh-Hans" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="frontInclude :: frontHeader"/>
<body>
<header class="header opaque" th:replace="frontInclude :: header_menu"></header>
    <div class="container">
        <div class="main w1200">
            <div class="article w1">
                <div class="article-box">
                    <header class="article-top">
                        <h1 class="article-tit">提交留言成功</h1>
                    </header>
                    <article class="article-main" style="display: flex;justify-content: center;align-items: center; height: 100%;">
                        <div class="success-message">
                            <img th:src="@{/css/assets/images/Checkmark.png}" />
                            <p>提交成功，<span id="countdown">5</span>秒后返回首页.</p>
                            <a type="submit" tabindex="6" th:href="@{/front/index}" class="button">返回首页</a>
                        </div>
                    </article>
                </div>
            </div>
        </div>
    </div>
    <style>
        .success-message {
            font-size: 1.0rem;
            text-align: center;
            padding: 20px;
        }
        
        .success-message>img {
            margin-top: 10px;
            height: 45px;
            width: 45px;
        }
    </style>
    <script>
        $('.header').removeClass('opaque').addClass('noOpaque')
        $(document).ready(function() {
            var countdown = 5; // 倒计时时间（秒）
            var counter = setInterval(function() {
                $("#countdown").text(countdown);
                countdown--;

                if (countdown < 0) {
                    clearInterval(counter);
                    // 页面跳转
                    window.location.href = "/front/index";
                }
            }, 1000);
        });
    </script>
<div th:replace="frontInclude :: footer"></div>
</body>
</html>